<template xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div><!--id="app"-->
    <h1>{{ title }}</h1>
    <input v-model="value" width="280" v-on:keyup.enter="add"> &nbsp;<button v-on:click="add">添加</button><br>
    <ul>
      <li v-for="(todo,index) in todos" :id="index">
        <input type="checkbox" v-on:click="finshwork(index)" :checked="todo.done" ><label>{{index+1}}.<span :class="{del:todo.done}">{{todo.value}}&nbsp;{{ todo.time|date }}</span></label>
      </li>
    </ul>
    <todos :total="todos.length" :done="sumDone"></todos>
  </div>
</template>


<script>
  import todos from './Todos.vue'
  import moment from 'moment'
  import 'moment/locale/zh-cn'
  moment.locale('zh-cn')
export default {
  name: 'app',
  components:{todos},
  data () {
    return {
      value:'',
      title:'vue-todos',
      todos:[{value:"read a book",done:false,time:Date.now()},
        {value:"add a code",done:true,time:Date.now()},
        {value:"write a letter",done:false,time:Date.now()}],
    }
  },
  methods:{
      add:function(){
        this.todos.push({value:this.value,done:false,time:Date.now()})
      },
      finshwork:function(index){
        this.todos[index].done=!this.todos[index].done
      }
    },
  filters:{
    hhmmss:function(val){
      return (val.getHours()+':'+val.getMinutes()+':'+val.getSeconds())
    },
    date(val){
      return moment(val).calendar();
    }
  },
    computed:{
      sumDone:function(){
        var num= 0;
        for(var i=0;i<this.todos.length;i++){
          if(this.todos[i].done){
            num++;
          }
        }
        return num;
      }
    }
  }
</script>

<style>
  .del{text-decoration: line-through}
  ul {
    list-style-type: none;
    padding: 0;
  }
</style>
